<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartBar',
  props: {
    value: Array,
    text: String,
    subtext: String
  },
  data() {
    return {
      dom: null,
      xAxisData: [],
      seriesData: []
    }
  },
  methods: {
    resize() {
      this.$nextTick(() => {
        if (this.value) {
          this.value.forEach((elem) => {
            this.xAxisData.push(elem.receive_date)
            this.seriesData.push(elem.count)
          })
        }
        let option = {
          title: {
            text: this.text,
            subtext: this.subtext,
            x: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: this.xAxisData,
            axisLabel: {
              rotate: 45
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.seriesData,
              type: 'bar'
            }
          ]
        }
        this.dom = echarts.init(this.$refs.dom, 'tdTheme')
        window.addEventListener('resize', () => {
          this.dom.resize()
        })
        this.dom.setOption(option)
      })
    }
  },
  mounted() {
    this.resize()
  },
  beforeDestroy() {}
}
</script>
